<template>
	<div class="charge-container">
		<template>
			<el-table :data="vipProductList"
				v-loading="loading"
				border
				style="width: 100%">
				<el-table-column align="center"
					label="产品图片"
					prop="imageUrl"
					width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{row}">
						<el-avatar shape="square"
							:size="80"
							fit="scale-down"
							:src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName"
					align="center"
					label="产品名称">
				</el-table-column>
				<el-table-column prop="description"
					align="center"
					label="产品描述">
				</el-table-column>
				<el-table-column prop="price"
					align="center"
					label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory"
					align="center"
					label="库存">
				</el-table-column>
				<el-table-column label="操作"
					align="center">
					<template v-slot="{row}">
						<el-button type="primary"
							v-isBuy="row.inventory"
							@click="pre_order(row)"
							icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>


<script>
	import * as payApi from '@/api/pay'
  	export default {
		// 自定义指令
		directives: {
			'isBuy':{  // 库存是 0 ，禁用按钮
				inserted(el,binding){
					// console.log(el,binding);

					if(binding.value == 0){
						// 如果库存是0
						// 给元素加上 is-disabled类名
						// 保存元素之前的类名
						let oldClassName = el.className;
						el.className = oldClassName + " is-disabled";  // 样式禁用按钮
						el.disabled = true;   // 禁用按钮
					}
				}
			}
		},
    	meta:{
      		title: 'vipCharge',
      		icon:"iconfont icon-vip11"
    	},
		methods: {
			pre_order(row){
				// console.log(row);

				// 弹出提示窗口 this.$confirm
				this.$confirm('正在充值'+row.description,'购买提示',{
					type: "info"
				}).then(() => {
					// 点击确定按钮
					// 1.要把当前的产品对象存到vuex，定义字段：currentProduct
					this.$store.commit('SET_CURRENT_PRODUCT',row);
					// 2.跳转到下单页面 preorder
					this.$router.push({name:'preorder'})
				}).catch(() => {
					// 点击取消按钮
					this.$message.warning('已取消购买')      
				});
			},
		},
		async created(){
			// 打开加载动画
			this.loading = true;
			// 发起请求，获取vip商品
			let res = await payApi.getVipProduct()
			this.loading = false; // 关闭加载动画
			// console.log(res);
			this.vipProductList = res.data.data
		},
		data(){
			return {
				loading:true,
				vipProductList:[],
			}
		},
  	}
</script>


<style scoped lang="less">
  .el-avatar {
    /deep/ img {
      width: 100%;
    }
    height: 30px !important;
    background-color: #fff;
  }
  .el-button--primary {
    background-color: #05a000;
  }
</style>
